需求

点击标签栏按钮，向下弹出菜单，再次点击，收回菜单

要解决的问题

1. 标签栏三栏样式，标签栏固定不动；
2. 点击标签栏弹出菜单，并且出现透明遮罩；
3. 遮罩优先级在弹出框之下；
4. 弹出框内标签的设置；
5. 滚动栏滚动条的隐藏

如何解决？

1. 弹性布局，横向，三者平分整栏;
2. 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度
3. 弹出框设置z-index；
4. 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距
5. ::-webkit-scrollbar {
   width: 0;
   height: 0;
   color: transparent;

}

具体实现

wxml

    
        
             
                  
       
        城市筛选
                   
               
              
                  
       
        职位筛选
                   
               
              
                  
       
        排序方式
                   
               
          
         
             
                  
                       
        
         {
   {item}}
                    
               
          
         
             
                  
                       
        
         {
   {item.title}}
                        
                            
          
          
           { {type}}
           
                         
                    
                   
                       
        确认            
               
          
         
             
                  
       
        智能排序
                   
       
        时间排序
                   
       
        薪资排序
               
          
         
             
                  
               
          
         
             
              
      
       搜索
          
     
    

wxss

page {    position: relative;    width: 100%;    height: 100vh;}.header {    width: 100%;    height: 80rpx;    position: fixed;    top: 0;    display: flex;    flex-direction: row;    justify-content: space-between;    text-align: center;    color: #313131;    font-size: 16px;    border-bottom: 1rpx solid #eeeeee;    z-index: 9999;    background-color: #fff;}.filterCity {    flex: 1;    position: relative;    height: 80rpx;    line-height: 80rpx;}.filterJob {    position: relative;    flex: 1;    height: 80rpx;    line-height: 80rpx;}.filterOrder {    position: relative;    flex: 1;    height: 80rpx;    line-height: 80rpx;}.header image {    position: absolute;    right: 15rpx;    top: 26rpx;    width: 30rpx;    height: 30rpx;}.active {    color: #ef0001;}.mask {    width: 100%;    height: 100%;    position: fixed;    top: 80rpx;    background-color: rgba(15, 15, 26, 0.3);}.cityContainer {    display: flex;    flex-direction: row;    justify-content: space-around;    align-items: space-between;    flex-wrap: wrap;    width: 100%;    height: 300rpx;    z-index: 999;    background-color: #fff;    border-bottom: 1rpx solid #e9e9e9;    padding-bottom: 130rpx;}.cityContainer .city {    display: block;    font-size: 15px;    margin-top: 100rpx;    width: 150rpx;    height: 50rpx;    line-height: 50rpx;    text-align: center;    border: 1rpx solid #e9e9e9;    overflow: hidden;}.select {    color: #ffffff;    background-color: #ed0000;}.posContainer {    height: 980rpx;    width: 100%;    background-color: #fff;    /* overflow:auto; */}::-webkit-scrollbar {    width: 0;    height: 0;    color: transparent;}.title {    margin-top: 55rpx;    font-size: 15px;    margin-left: 28rpx;}.poscontent {    width: 100%;    display: flex;    flex-direction: row;    justify-content: flex-start;    flex-wrap: wrap;    margin-top: -15rpx;}.tag {    margin-left: 28rpx;    margin-top: 23rpx;    font-size: 13px;    width: 150rpx;    height: 50rpx;    line-height: 50rpx;    text-align: center;    border: 1rpx solid #e9e9e9;}.confirm {    width: 100%;    height: 150rpx;    border: 1rpx solid transparent;    background-color: #fff;}.weui-btn {    position: fixed;    width: 95%;    bottom: 52rpx;    left: 50%;    transform: translateX(-50%);}.orderContainer {    display: flex;    flex-direction: row;    justify-content: space-around;    align-items: center;    background-color: #fff;    width: 100%;    height: 125rpx;}.block {    font-size: 13px;    width: 200rpx;    height: 50rpx;    line-height: 50rpx;    text-align: center;    border: 1rpx solid #e9e9e9;}.search {    position: fixed;    bottom: 80rpx;    background-color: #fff;    right: 25rpx;    width: 150rpx;    height: 75rpx;    line-height: 75rpx;    text-align: center;    border-radius: 35rpx;    box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5;}.search image {    width: 30rpx;    height: 30rpx;}.search text {    font-size: 15px;    padding-left: 9rpx;    color: #666666;}.listContainer {    width: 100%;    height: 100%;    margin-top: 80rpx;}

js

import category from '../../api/employ'import jobList from '../../api/detail'Page({  data: {    curIndex: '',    isActive: false,    jobList:[],    cur: [],    job: [],    isShow: true,    status: 0,    isMask: false,    isSelect: false,    city: ['全国', '杭州', '北京', '深圳', '上海', '广州', '武汉', '重庆']  },  changeStatus(e) {    let status = e.currentTarget.dataset.status;    let cur = category;    this.setData({      isActive: !this.data.isActive,      status: status,      isMask: !this.data.isMask,      cur: cur,    })  },  select(e) {    let curIndex = e.currentTarget.dataset.index;    this.setData({      isSelect: " curIndex == this.data.curIndex ? '!this.data.isActive' : 'true' ",      isActive: false,      isMask:false,      curIndex: curIndex,    })  },  multiSelect(e){   let  multiIndex=e.currentTarget.dataset.index;   this.setData({     isSelect:!this.data.isSelect,     curIndex:multiIndex   })  },  search(e) {    wx.navigateTo({      url: '../search/search',    })  },  onLoad: function (e) {    this.setData({      jobList:jobList    })  },  click:function (e) {    let id =e.currentTarget.dataset.id;    wx.navigateTo({      url: `../detail/detail?id=${id}`,    })  }})